<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function $$(id){
				return document.getElementById(id)
			}
			window.onload=function(){
				var cnv=$$("canvas")
				var cxt=cnv.getContext("2d")
				
				var i=0
				setInterval(function(){
					gradient=cxt.createRadialGradient(60,60,0,60,60,60)
					gradient.addColorStop(i*0,"magenta")
					gradient.addColorStop(i*0.25,"blue")
					gradient.addColorStop(i*0.50,"green")
					gradient.addColorStop(i*0.75,"yellow")
					gradient.addColorStop(i*1.0,"hotpink")
					cxt.fillStyle=gradient
					i=i+0.1
					if(i>=1){
						i=0
					}
					cxt.fillRect(0,0,120,120)
				},50)
			}
		</script>
	</head>
	<body>
		<canvas id="canvas" width="200"height="150" style="border: gray dashed 1px;"></canvas>
	</body>
</html>
